<script setup lang="ts">
import axios from 'axios'

import type { TabsPaneContext } from 'element-plus'

import { ref } from 'vue'
import type { SpaceInstance } from 'element-plus'

const direction = ref<SpaceInstance['direction']>('horizontal')
const fillRatio = ref(30)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])

const activeName = ref('first')
const accordion = ref(['1'])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log('切换了')
}

// 没网时的默认头像
const circleUrl = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
// 存储返回的数据
const restaurantForm = ref([
  {
    addressareaid: null,
    addressdetail: null,
    createtime: null,
    image: null,
    introduction: null,
    password: null,
    phone: null,
    point: null,
    qualification: null,
    restaurantid: null,
    restaurantname: null,
    restauranttypename: null,
    state: null,
    surplus: null,
    updatetime: null,
    inform: null
  }
])
const getRestaurantsList = () => {
  axios({
    method: 'get',
    url: 'http://localhost:8080/manage/resgetall',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    }
  }).then(
    (res) => {
      console.log('res', res)
      restaurantForm.value = res.data.data
    },
    (err) => {
      console.log(err)
    }
  )
}
getRestaurantsList()
const checkingForm = ref([])
const openForm = ref([])
const restForm = ref([])
const NopassForm = ref([])

function complaintFormClassification() {
  restaurantForm.value.forEach((item) => {
    if (item.state == 0) {
      checkingForm.value.push(item)
    } else if (item.state == 1) {
      openForm.value.push(item)
    } else if (item.state == 2) {
      restForm.value.push(item)
    } else if (item.state == 3) {
      NopassForm.value.push(item)
    }
  })
}
setTimeout(() => {
  complaintFormClassification()
}, 2000)

// 管理员驳回商家
function rejectRestaurant(restaurantid: any, inform: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/manage/rejectres',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      inform: inform,
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      if (res.data.code == 0) {
        ElMessage.success('已驳回商家注册请求')
        window.location.reload()
      }
    },
    (err) => {
      console.log(err)
      ElMessage.error('驳回商家注册失败,请刷新网页')
      window.location.reload()
    }
  )
}
function passRestaurant(restaurantid: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/restaurant/relax',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      if (res.data.code == 0) {
        ElMessage.success('已通过商家注册请求')
      }
    },
    (err) => {
      console.log(err)
      ElMessage.error('通过商家注册请求失败,请刷新网页')
    }
  )
}
// 回复正在营业商家
function replyOpenRestaurant(restaurantid: any, inform: any) {
  console.log('sdasdas', restaurantid)
  console.log('sdasdas', inform)
  axios({
    method: 'post',
    url: 'http://localhost:8080/manage/addinform',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      inform: inform,
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      if (res.data.code == 0) {
        ElMessage.success('留言成功')
      }
    },
    (err) => {
      console.log(err)
      ElMessage.error('留言失败')
    }
  )
}
// 回复休息商家
function replyRestRestaurant(restaurantid: any, inform: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/manage/addinform',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      inform: inform,
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      if (res.data.code == 0) {
        ElMessage.success('留言成功')
      }
    },
    (err) => {
      console.log(err)
      ElMessage.error('留言失败')
    }
  )
}
// 回复已经驳回商家
function replyNopassRestaurant(restaurantid: any, inform: any) {
  axios({
    method: 'post',
    url: 'http://localhost:8080/manage/addinform',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      inform: inform,
      restaurantid: restaurantid
    }
  }).then(
    (res) => {
      if (res.data.code == 0) {
        ElMessage.success('留言成功')
      }
    },
    (err) => {
      console.log(err)
      ElMessage.error('留言失败')
    }
  )
}
</script>

<template>
  <div class="order-container">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="待审核商家" name="first">
        <div>
          <div style="margin-bottom: 15px">
            排版方向:
            <el-radio v-model="direction" value="horizontal">水平</el-radio>
            <el-radio v-model="direction" value="vertical">垂直</el-radio>
          </div>
          <div style="margin-bottom: 15px">填充比例:<el-slider v-model="fillRatio" /></div>
          <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
            <el-card v-for="(p, index) in checkingForm" :key="index" class="box-card">
              <template #header>
                <div class="card-header">
                  <div style="display: flex; justify-content: flex-start; align-items: center">
                    <span>申请时间：{{ p.createtime }}</span>
                    <el-button
                      style="margin-left: auto"
                      type="primary"
                      plain
                      text
                      @click="passRestaurant(p.restaurantid)"
                      >通过</el-button
                    >
                    <el-button
                      type="danger"
                      plain
                      text
                      @click="rejectRestaurant(p.restaurantid, p.inform)"
                      >驳回</el-button
                    >
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <p>餐厅ID：{{ p.restaurantid }}</p>
                    <p>餐厅类型：{{ p.restauranttypename }}</p>
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </template>
              <div class="container">
                <div class="left">
                  <img
                    :src="p.qualification"
                    style="width: 190px; height: 200px; margin-right: 0px"
                  />
                </div>
                <div class="right">
                  <el-card style="width: 350px; height: 200px" shadow="always">
                    <h2>{{ p.restaurantname }}</h2>
                    <p style="margin-top: 30px; margin-bottom: 10px">
                      餐厅状态：<el-tag type="warning">等待管理员审核中......</el-tag>
                    </p>
                    <p>餐厅介绍:{{ p.introduction }}</p>
                  </el-card>
                </div>
              </div>

              <div>
                <el-collapse v-model="accordion" @change="handleChange">
                  <el-collapse-item title="查看详情" :name="index">
                    <h5>餐厅图片：</h5>
                    <div class="container">
                      <div class="left">
                        <img :src="p.image" style="width: 190px; height: 200px" />
                      </div>
                      <div class="right">
                        <el-card style="width: 350px; height: 200px" shadow="always">
                          <h3>餐厅详情</h3>
                          <p>所在区域：{{ p.addressareaid }}</p>
                          <p>详细地址：{{ p.addressdetail }}</p>
                          <p>联系电话：{{ p.phone }}</p>
                          <p>餐厅容量:{{ p.surplus }}桌</p>
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <p style="margin-bottom: 0px; margin-top: 0px">评分: {{ p.point }}分</p>
                            <el-rate
                              v-model="p.point"
                              disabled
                              :colors="colors"
                              score-template="{value}分"
                            />
                          </div>
                        </el-card>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <el-input
                  v-model="p.inform"
                  style="width: 565px"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="请输入驳回原因"
                  maxlength="50"
                  show-word-limit
                />
              </div>

              <template #footer>
                <div style="display: flex; justify-content: flex-start; align-items: center">
                  <el-button
                    style="margin-left: auto"
                    type="primary"
                    plain
                    @click="passRestaurant(p.restaurantid)"
                    >通过</el-button
                  >
                  <el-button type="danger" plain @click="rejectRestaurant(p.restaurantid, p.inform)"
                    >驳回</el-button
                  >
                </div>
              </template>
            </el-card>
          </el-space>
        </div>
      </el-tab-pane>

      <el-tab-pane label="正在营业" name="second">
        <div>
          <div style="margin-bottom: 15px">
            排版方向:
            <el-radio v-model="direction" value="horizontal">水平</el-radio>
            <el-radio v-model="direction" value="vertical">垂直</el-radio>
          </div>
          <div style="margin-bottom: 15px">填充比例:<el-slider v-model="fillRatio" /></div>
          <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
            <el-card v-for="(p, index) in openForm" :key="index" class="box-card">
              <template #header>
                <div class="card-header">
                  <div style="display: flex; justify-content: flex-start; align-items: center">
                    <span>申请时间：{{ p.createtime }}</span>
                    <!-- <el-button style="margin-left: auto;" type="primary" plain text>通过</el-button>
                    <el-button type="danger" plain text>驳回</el-button> -->
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <p>餐厅ID：{{ p.restaurantid }}</p>
                    <p>餐厅类型：{{ p.restauranttypename }}</p>
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </template>
              <div class="container">
                <div class="left">
                  <img
                    :src="p.qualification"
                    style="width: 190px; height: 200px; margin-right: 0px"
                  />
                </div>
                <div class="right">
                  <el-card style="width: 350px; height: 200px" shadow="always">
                    <h2>{{ p.restaurantname }}</h2>
                    <p style="margin-top: 30px; margin-bottom: 10px">
                      餐厅状态：<el-tag type="success">正在营业中......</el-tag>
                    </p>
                    <p>餐厅介绍:{{ p.introduction }}</p>
                  </el-card>
                </div>
              </div>
              <div>
                <el-collapse v-model="accordion">
                  <el-collapse-item title="查看详情" :name="index">
                    <h5>餐厅图片：</h5>
                    <div class="container">
                      <div class="left">
                        <img :src="p.image" style="width: 190px; height: 200px" />
                      </div>
                      <div class="right">
                        <el-card style="width: 350px; height: 200px" shadow="always">
                          <h3>餐厅详情</h3>
                          <p>所在区域：{{ p.addressareaid }}</p>
                          <p>详细地址：{{ p.addressdetail }}</p>
                          <p>联系电话：{{ p.phone }}</p>
                          <p>餐厅容量:{{ p.surplus }}桌</p>
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <p style="margin-bottom: 0px; margin-top: 0px">评分: {{ p.point }}分</p>
                            <el-rate
                              v-model="p.point"
                              disabled
                              :colors="colors"
                              score-template="{value}分"
                            />
                          </div>
                        </el-card>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <p style="margin-top: 20px; margin-bottom: 20px">管理员留言：</p>
                <el-input
                  v-model="p.inform"
                  style="width: 565px"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="留言给商家"
                  maxlength="50"
                  show-word-limit
                />
              </div>
              <template #footer>
                <div style="display: flex; justify-content: flex-start; align-items: center">
                  <el-button
                    style="margin-left: auto"
                    type="primary"
                    plain
                    @click="replyOpenRestaurant(p.restaurantid, p.inform)"
                    >发送留言</el-button
                  >
                </div>
              </template>
            </el-card>
          </el-space>
        </div>
      </el-tab-pane>
      <el-tab-pane label="正在休息" name="third">
        <div>
          <div style="margin-bottom: 15px">
            排版方向:
            <el-radio v-model="direction" value="horizontal">水平</el-radio>
            <el-radio v-model="direction" value="vertical">垂直</el-radio>
          </div>
          <div style="margin-bottom: 15px">填充比例:<el-slider v-model="fillRatio" /></div>
          <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
            <el-card v-for="(p, index) in restForm" :key="index" class="box-card">
              <template #header>
                <div class="card-header">
                  <div style="display: flex; justify-content: flex-start; align-items: center">
                    <span>申请时间：{{ p.createtime }}</span>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <p>餐厅ID：{{ p.restaurantid }}</p>
                    <p>餐厅类型：{{ p.restauranttypename }}</p>
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </template>
              <div class="container">
                <div class="left">
                  <img
                    :src="p.qualification"
                    style="width: 190px; height: 200px; margin-right: 0px"
                  />
                </div>
                <div class="right">
                  <el-card style="width: 350px; height: 200px" shadow="always">
                    <h2>{{ p.restaurantname }}</h2>
                    <p style="margin-top: 30px; margin-bottom: 10px">
                      餐厅状态：<el-tag type="error">正在休息中......</el-tag>
                    </p>
                    <p>餐厅介绍:{{ p.introduction }}</p>
                  </el-card>
                </div>
              </div>
              <div>
                <el-collapse v-model="accordion" @change="handleChange">
                  <el-collapse-item title="查看详情" :name="index">
                    <h5>餐厅图片：</h5>
                    <div class="container">
                      <div class="left">
                        <img :src="p.image" style="width: 190px; height: 200px" />
                      </div>
                      <div class="right">
                        <el-card style="width: 350px; height: 200px" shadow="always">
                          <h3>餐厅详情</h3>
                          <p>所在区域：{{ p.addressareaid }}</p>
                          <p>详细地址：{{ p.addressdetail }}</p>
                          <p>联系电话：{{ p.phone }}</p>
                          <p>餐厅容量:{{ p.surplus }}桌</p>
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <p style="margin-bottom: 0px; margin-top: 0px">评分: {{ p.point }}分</p>
                            <el-rate
                              v-model="p.point"
                              disabled
                              :colors="colors"
                              score-template="{value}分"
                            />
                          </div>
                        </el-card>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <p style="margin-top: 20px; margin-bottom: 20px">管理员留言：</p>
                <el-input
                  v-model="p.inform"
                  style="width: 565px"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="留言给商家"
                  maxlength="50"
                  show-word-limit
                />
              </div>
              <template #footer>
                <div style="display: flex; justify-content: flex-start; align-items: center">
                  <el-button
                    style="margin-left: auto"
                    type="primary"
                    plain
                    @click="replyRestRestaurant(p.restaurantid, p.inform)"
                    >发送留言</el-button
                  >
                </div>
              </template>
            </el-card>
          </el-space>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已经驳回" name="four">
        <div>
          <div style="margin-bottom: 15px">
            排版方向:
            <el-radio v-model="direction" value="horizontal">水平</el-radio>
            <el-radio v-model="direction" value="vertical">垂直</el-radio>
          </div>
          <div style="margin-bottom: 15px">填充比例:<el-slider v-model="fillRatio" /></div>
          <el-space fill wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
            <el-card v-for="(p, index) in NopassForm" :key="index" class="box-card">
              <template #header>
                <div class="card-header">
                  <div style="display: flex; justify-content: flex-start; align-items: center">
                    <span>申请时间：{{ p.createtime }}</span>
                  </div>
                  <div style="display: flex; justify-content: space-between; align-items: center">
                    <p>餐厅ID：{{ p.restaurantid }}</p>
                    <p>餐厅类型：{{ p.restauranttypename }}</p>
                    <p></p>
                    <p></p>
                    <p></p>
                  </div>
                </div>
              </template>
              <div class="container">
                <div class="left">
                  <img
                    :src="p.qualification"
                    style="width: 190px; height: 200px; margin-right: 0px"
                  />
                </div>
                <div class="right">
                  <el-card style="width: 350px; height: 200px" shadow="always">
                    <h2>{{ p.restaurantname }}</h2>
                    <p style="margin-top: 30px; margin-bottom: 10px">
                      餐厅状态：<el-tag type="info">已驳回</el-tag>
                    </p>
                    <p>餐厅介绍:{{ p.introduction }}</p>
                  </el-card>
                </div>
              </div>
              <div>
                <el-collapse v-model="accordion" @change="handleChange">
                  <el-collapse-item title="查看详情" :name="index">
                    <h5>餐厅图片：</h5>
                    <div class="container">
                      <div class="left">
                        <img :src="p.image" style="width: 190px; height: 200px" />
                      </div>
                      <div class="right">
                        <el-card style="width: 350px; height: 200px" shadow="always">
                          <h3>餐厅详情</h3>
                          <p>所在区域：{{ p.addressareaid }}</p>
                          <p>详细地址：{{ p.addressdetail }}</p>
                          <p>联系电话：{{ p.phone }}</p>
                          <p>餐厅容量:{{ p.surplus }}桌</p>
                          <div
                            style="
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <p style="margin-bottom: 0px; margin-top: 0px">评分: {{ p.point }}分</p>
                            <el-rate
                              v-model="p.point"
                              disabled
                              :colors="colors"
                              score-template="{value}分"
                            />
                          </div>
                        </el-card>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
                <p style="margin-top: 20px; margin-bottom: 20px">管理员留言：</p>
                <el-input
                  v-model="p.inform"
                  style="width: 565px"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                  placeholder="留言给商家"
                  maxlength="50"
                  show-word-limit
                />
              </div>
              <template #footer>
                <div style="display: flex; justify-content: flex-start; align-items: center">
                  <el-button
                    style="margin-left: auto"
                    type="primary"
                    plain
                    @click="replyNopassRestaurant(p.restaurantid, p.inform)"
                    >发送留言</el-button
                  >
                </div>
              </template>
            </el-card>
          </el-space>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.order-container {
  padding: 10px 30px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

// 左右开始
.container {
  display: flex;
  // align-items: center;
}

.left {
  flex-shrink: 0;
  /* 防止图片被压缩 */
}

.right {
  margin-left: 20px;
  /* 可以根据具体情况设置间距 */
}

// 左右结束
</style>
